<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入标签库:--%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <%--Web路径：
            不以 / 开始的相对路径，找资源以当前资源的路径为基准，容易出错
            以 / 开始的路径，找资源，以服务器的根路径为标准( / 就是http://localhost:3306的意思)
                http://localhost:3306/mycrud-----写作：/mycrud(加上项目名)
    --%>
    <title>首页</title>
    <%
        pageContext.setAttribute("APP_PATH",request.getContextPath());
    %>
    <%--Bootstrap--%>
    <!--引入jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script type="text/javascript" src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
    <%--引入下载的样式：--%>
    <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <%--引入下载的js文件：--%>
    <script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<%--背景图：--%>
<style type="text/css">
    body{
        background-image: url(static/images/1.jpg);
        background-size:cover;
    }
</style>
<%--搭建显示页面:Bootstrap--%>
<div class="container">
    <%--标题--%>
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-danger">秋后处斩名录:</h1>
        </div>
    </div>
    <%--按钮--%>
    <div class="row">
        <div class="col-md-8 col-md-offset-8">
            <button class="btn btn-primary" id="emp_add_modal_button">捉拿人犯</button>
            <button class="btn btn-danger" id="emp_delete_all_btn">枭首示众</button>
        </div>
    </div>

<!-- 按钮响应Modal模态框 -->
<%--1、死囚添加--%>
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">带人犯：</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="form1">
                    <%--姓名--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">人犯</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="字母(3-16)、下划线、汉字(2-5)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <%--gender--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1" value="M" checked="checked">男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2" value="W">女
                            </label>
                        </div>

                    </div>
                    <%--email--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">籍贯</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input" placeholder="陕西西安">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <%--部门--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所犯何事</label>
                        <div class="col-sm-10">
                            <%--部门信息从数据库获取：--%>
                            <select class="form-control" name="deptId" id="dept_add_select">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">死罪可免！</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">打入死牢！</button>
            </div>
        </div>
    </div>
</div>
<%--2、死囚修改模态框：--%>
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">人犯验明正身：</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <%--姓名--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">人犯</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="empName_update_static"></p>
                        </div>
                    </div>
                    <%--gender--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender3" value="M">男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender4" value="W">女
                            </label>
                        </div>

                    </div>
                    <%--email--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">籍贯</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_update_input" placeholder="陕西西安">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <%--部门--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所犯何事</label>
                        <div class="col-sm-10">
                            <%--部门信息从数据库获取：--%>
                            <select class="form-control" name="deptId" id="dept_update_select">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">核对无误！</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">修改完毕！</button>
            </div>
        </div>
    </div>
</div>
    <%--表格数据--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emp_table">
                <%--表头:--%>
                <thead>
                    <tr>
                        <td>
                            <input type="checkbox" id="check_all"/>
                        </td>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Gender</th>
                        <th>E-mail</th>
                        <th>Department</th>

                    </tr>
                </thead>

                <%--表的内容:函数获取，通过id插入--%>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <%--分页信息--%>
    <div class="row">
        <%--文字分页信息,通过id来插入--%>
        <div class="col-md-6" id="page_info_area"></div>

        <%--分页条信息,通过id来插入--%>
        <div class="col-md-6" id="page_nav_area"></div>
    </div>
</div>

<script type="text/javascript">

    var totalRecord;//总页数
    var currentPage;//当前页

    //1、页面加载完成后，
    // 直接发送一个Ajax请求，要到分页数据
    $(function () {
        //一进来就去首页（第一页）！
        to_page(1);
    });
    //查询跳转页的数据：
    function  to_page(pn) {
        //排除页面初加载全选框默认选中：
        $("#check_all").prop("checked",false);
        $.ajax({
            //通过这个请求获取数据：
            url :"${APP_PATH}/emps",
            data :"pn="+pn,
            type :"GET",
            //执行success方法，得到包含pageInfo的json形式的result，附带状态码等
            success :function (result) {
                //1 解析json并显示员工数据
                build_emps_table(result);
                //2 解析json并显示分页信息
                build_page_info(result);
                //3、解析显示分页条信息
                build_page_nav(result);
            }
        });
    }
    // 解析并显示员工数据的函数
    function build_emps_table(result) {
        //获取取数据前先清空当前页数据，避免跳转后前一页数据还在
        $("#emp_table tbody").empty();
        //获取员工数据：
        var emps = result.myExtend.pageInfo.list;
        $.each(emps,function (index,item) {
            //还得加上选定框：
            var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender == "M"?"男":"女");
            var emailTd = $("<td></td>").append(item.email);
            var departmentTd = $("<td></td>").append(item.department.deptName);
            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                                .append("验明正身");
            //遍历查询结果时，为每个员工后的编辑按钮添加一个自定义属性，把当前员工的ID放进去
            editBtn.attr("edit-id",item.empId);

            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                                                .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                                                .append("斩立决！");
            //遍历查询结果时，为每个员工后的删除按钮添加一个自定义属性，把当前员工的ID放进去
            delBtn.attr("delete-id",item.empId);

            //两个按钮之间的间隔：
            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
            //append()执行完成后，还是会返回原来的元素，所以可以链式操作
           $("<tr></tr>").append(checkBoxTd)
                        .append(empIdTd)
                        .append(empNameTd)
                        .append(genderTd)
                        .append(emailTd)
                        .append(departmentTd)
                        .append(btnTd)
                        .appendTo("#emp_table tbody");
        });
    }

    // 解析并显示分页信息的函数
    function build_page_info(result){
        //获取取数据前先清空当前页数据，避免跳转后前一页数据还在
        $("#page_info_area").empty();
        $("#page_info_area")
            .append("第"+result.myExtend.pageInfo.pageNum+"页," +
                "共"+result.myExtend.pageInfo.pages+"页," +
                "总数:"+result.myExtend.pageInfo.total);

        //顺便给总记录数赋个值：
        totalRecord = result.myExtend.pageInfo.pages;
        //给当前页也做个标记：
        currentPage = result.myExtend.pageInfo.pageNum;
    }
    // 解析并显示分页条的函数
    function build_page_nav(result) {
        //获取取数据前先清空当前页数据，避免跳转后前一页数据还在
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        //处在首页，前一页和首页按键不显示：
        if(result.myExtend.pageInfo.hasPreviousPage == true){
            //1、先添加首页和前一页
            ul.append(firstPageLi).append(prePageLi);
        }
        //添加单击事件：
        firstPageLi.click(function () {
            //首页去第一页
            to_page(1);
        });
        prePageLi.click(function () {
            //前一页去当前页-1页
            to_page(result.myExtend.pageInfo.pageNum - 1);
        });

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("尾页").attr("href","#"));

        //添加单击事件：
        nextPageLi.click(function () {
            //后一页去当前页+1页
            to_page(result.myExtend.pageInfo.pageNum + 1);
        });
        lastPageLi.click(function () {
            //尾页去最后页
            to_page(result.myExtend.pageInfo.pages);
        });

        //2、遍历，添加页码号：
        $.each(result.myExtend.pageInfo.navigatepageNums,function(index,item){

            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if (result.myExtend.pageInfo.pageNum == item){
                numLi.addClass("active");
            }
            numLi.click(function () {
                //点击哪一页就跳转到哪一页！
                to_page(item);
            });
            ul.append(numLi);
        });
        //处在尾页，后一页和尾页按键不显示：
        if(result.myExtend.pageInfo.hasNextPage == true){
        //3、添加下一页和尾页
            ul.append(nextPageLi).append(lastPageLi);
        }

        //给导航标签中添加定义好的ul列表标签
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }
    //清空表单样式及内容
    function reset_form(ele){
        $(ele)[0].reset();
        //清空表单样式
        $(ele).find("*").removeClass("has-error has-success");
        $(ele).find(".help-block").text("");
    }
    //2、绑定新增按钮的点击事件
    // 点击,弹出模态框：
    $("#emp_add_modal_button").click(function () {
        //弹出模态框之前，先清除上次的数据和CSS样式，
        // 以免已通过校验的数据不做更改被再次提交保存！或者上次的错误提示保留
        reset_form("#empAddModal form");
        //弹出模态框之前，先发送Ajax请求，查询部门信息，显示在下拉列表中：
        getDepts("#empAddModal select");
        //弹出模态框
       $("#empAddModal").modal({
           //背景不删除（打开模态框后，点击背景模态框不关闭!）
           backdrop:"static"
       });
    });
    //查出所有的部门信息：
    function getDepts(ele) {
        //遍历之前还需要清空一下不然多点几次就很多选项
        $(ele).empty();
        $.ajax({
            url: "${APP_PATH}/depts",
            type: "GET",
            success: function (result) {
                //遍历部门信息：
                $.each(result.myExtend.depts,function () {
                    var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                    //绑定下拉列表
                    optionEle.appendTo(ele);
                });
            }
        });
    }
    //表单数据校验方法：点击保存才会校验
    function validata_add_form(){
        //1、用 正则表达式 拿到数据
        //校验姓名：
        var empName = $("#empName_add_input").val();
        var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
        if(!regName.test(empName)){
            show_validate_msg("#empName_add_input","error","表单提交-前端校验-用户名非法！");
            return false;
        }else{
            show_validate_msg("#empName_add_input","success","");
        };

        //校验email
        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if(!regEmail.test(email)){
            show_validate_msg("#email_add_input","error","邮箱非法！");
            return false;
        }else{
            show_validate_msg("#email_add_input","success","");
        }
        return true;
    }
    //根据校验状态显示校验样式：
    function show_validate_msg(ele,status,msg){
        //清空上次校验的显示样式（避免追加）
        //清除校验显示样式：
        $(ele).parent().removeClass("has-success has-error");
        //清除span标签的提示信息
        $(ele).next("span").text("");
        if("success"==status){
            $(ele).parent().addClass("has-success");
            //给当前元素的下一个元素（span标签），输出提示信息：
            $(ele).next("span").text(msg);
        }else if("error"==status){
            $(ele).parent().addClass("has-error");
            //给当前元素的下一个元素（span标签），输出提示信息：
            $(ele).next("span").text(msg);
        }
    }
    //员工姓名输入框更新绑定事件：（输入姓名同时校验是否存在同名！）
    //该校验是可被绕过的！！！因为添加的自定义属性在浏览器可被修改！
    $("#empName_add_input").change(function ()  {
        //发送ajax请求，校验用户名是否可用：
        //输入框的值先拿出来
        var empName = this.value;
        $.ajax({
            url:"${APP_PATH}/checkuser",
            data:"empName="+empName,
            type:"POST",
            success:function (result) {
                //根据控制器返回得结果Msg里面的code状态码来判断结果：
                if(result.code==100){
                    //提示信息：
                    show_validate_msg("#empName_add_input","success","用户名可用！");
                    //根据校验结果给模态框的 保存按钮的 自定义属性ajax-val设置不同的值：
                    $("#emp_save_btn").attr("ajax-va","success");
                }else{
                    show_validate_msg("#empName_add_input","error",result.myExtend.va_msg);
                    $("#emp_save_btn").attr("ajax-va","error");
                }
            }
        });
    });
    //绑定模态框新增员工的确定保存单击事件：
    $("#emp_save_btn").click(function () {
        //1、将模态框填写的数据保存提交至服务器：
        //2、先对数据进行校验：
        //但是若后端校验已经重复，但提交时前端校验又检测合法，
        // 而且修改后端传给前端的重复用户名判定状态码：ajax-va为success后会绕过该校验，从而提交错误数据！
        //所以，保存时还得进行后端校验！
        if(!validata_add_form()){
            return false;
        };
        //3、保存前先判断之前的Ajax用户名校验是否成功，成功了再保存，否则保存无效！
        //取出校验时存在保存按钮的自定义属性的值判断：
        if($(this).attr("ajax-va")=="error"){
            return false;
        }
        //4、发送ajax请求保存员工
        $.ajax({
            url:"${APP_PATH}/emp",
            type:"POST",
            data:$("#empAddModal form").serialize(),
            success:function(result){
                //JSR303校验防止绕过前端校验,成功返回的状态码为100，否则为200
                if(result.code == 100){
                    //员工保存成功；
                    //1、关闭模态框
                    $("#empAddModal").modal('hide');
                    //2、来到最后一页，显示刚才保存的数据
                    //发送ajax请求显示最后一页数据即可
                    to_page(totalRecord);
                }else{
                    //显示失败信息：
                    if(undefined != result.myExtend.errorFields.email){
                        //显示邮箱错误信息：
                        show_validate_msg("#email_add_input","error",result.myExtend.errorFields.email);
                    }
                    if(undefined != result.myExtend.errorFields.empName){
                        //显示名字错误信息：
                        show_validate_msg("#empName_add_input","error",result.myExtend.errorFields.empName);
                    }
                }
            }
        });
    });

    //3、编辑按钮绑定编辑事件：
    //但是按钮创建之前就去绑定事件，找不到，绑不上
    //所以（1）、在创建按钮的时候绑定事件  /（2）、绑定点击.live()可以为后来创建的元素绑定事件
    //jQuery新版，on取代了live()
    $(document).on("click",".edit_btn",function () {
        //1、查出部门信息，显示到部门列表：
        getDepts("#empUpdateModal select");
        //2、按id查出员工信息，并显示到模态框：
        getEmp($(this).attr("edit-id"));
        //3、把员工ID传给确认更新按钮的自定义属性：
        $("#emp_update_btn").attr("emp-id",$(this).attr("edit-id"));
        //4、弹出模态框：
        $("#empUpdateModal").modal({
            backdrop: "static"
        });

    });
    //查询对应id的员工信息并显示到模态框的方法：
    function getEmp(id) {
        $.ajax({
            url:"${APP_PATH}/emp/"+id,
            type:"GET",
            success:function (result) {
                // console.log(result);
                var empData = result.myExtend.emp;
                $("#empName_update_static").text(empData.empName);
                //找到编辑模态框里name=gender的<input>元素,
                //获取到的值会跟gender单选框的值对比，匹配的自动选上
                $("#empUpdateModal input[name=gender]").val([empData.gender]);
                $("#email_update_input").val(empData.email);
                //下拉列表,原理同性别单选框类似
                //查询部门时是根据编辑按钮响应的员工对象的部门ID获取的部门名，所以此处只需要传入部门ID即可
                $("#empUpdateModal select").val([empData.deptId]);
            }
        });
    }
    //更新提交按钮绑定单击提交更新的事件：
    $("#emp_update_btn").click(function () {
        //验证更改后的邮箱是否合法：
        //校验email
        var email = $("#email_update_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if(!regEmail.test(email)){
            show_validate_msg("#email_update_input","error","邮箱非法！");
            return false;
        }else{
            show_validate_msg("#email_update_input","success","");
        }

        //发送请求，保存更新的数据：
        $.ajax({
            //从更新按钮获取绑定的员工id：emp-id
            url:"${APP_PATH}/emp/"+parseInt($(this).attr("emp-id")),
            type: "PUT",
            data: $("#empUpdateModal form").serialize(),
            success:function (result) {
                // alert(result.msg);
                //1、关闭对话框
                $("#empUpdateModal").modal("hide");
                //回到当前页面
                to_page(currentPage);
            }
        });
    });

    //4、删除按钮绑定删除事件
    //与修改按钮一致：
    $(document).on("click",".delete_btn",function () {
        //1、把员工ID和姓名拿出来：
        let empId = $(this).attr("delete-id");
        //删除按钮所在行元素<tr>的第3个<td>子元素就是姓名元素：
        let empName = $(this).parents("tr").find("td:eq(2)").text();
        //2、弹出确认删除对话框：
        if(confirm("枭首【" + empName + "】否？")){
            //3、确认的话，发送Ajax请求删除即可：
            $.ajax({
                url:"${APP_PATH}/emp/"+empId,
                type: "DELETE",
                success:function (result) {
                    alert(result.msg);
                    //回到本页
                    to_page(currentPage);
                }
            });
        }
    });

    //5、批量删除：
    //5.1点击表头选中全部\全不选：
    $("#check_all").click(function () {
        //prop才是修改和读取dom原生属性的值
        //这些是dom原生的属性（checked），而attr获取自定义属性的值；
        //所有的单选框跟表头的选中状态同步：
        //                  $(this).prop("checked")是表头元素的是否选中状态
        //                  checked是他们原生属性
        //为每个选中框checked属性赋予表头checked属性的值
        $(".check_item").prop("checked",$(this).prop("checked"));
    });

    //5.2每个check_item绑定事件：一整页都选满后，全选框得自动选中！
    $(document).on("click",".check_item",function(){
        //判断当前选中的元素是否5个(整页选满！)
        var flag = $(".check_item:checked").length==$(".check_item").length;
        $("#check_all").prop("checked",flag);
    });
    //5.3删除全部所选：
    $("#emp_delete_all_btn").click(function () {
        var empNames = "";//员工名字字符串：
        var del_idstr = "";//员工ID字符串：
        //遍历全部所选：
        $.each($(".check_item:checked"),function () {
            //拿到所选的第3个元素的值：再拼起来，顿号分割
            empNames += $(this).parents("tr").find("td:eq(2)").text()+"、";
            //拿到所选的第2个元素的值，拼起来，就是id字符串，-分割：
            del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
        });
        //拿出名字串去掉最后多余的一个顿号和id串里最后一个多余的-：
        empNames = empNames.substring(0,empNames.length-1);
        del_idstr = del_idstr.substring(0,del_idstr.length-1);
        //判断是否删除：
        if(confirm("枭首【" + empNames + "】否？")){
            //发送Ajax请求删除：
            $.ajax({
                url:"${APP_PATH}/emp/"+del_idstr,
                type:"DELETE",
                success:function (result) {
                    alert();result.msg;
                    //回到当前页：
                    to_page(currentPage);
                }
            });
        }
    });

</script>
</body>
</html>
